package myJs.cps

import cats.effect.SyncIO
import japgolly.scalajs.react.vdom.all._
import japgolly.scalajs.react._
import japgolly.scalajs.react.util.EffectCatsEffect._
import myJs.Implicits._
import myJs.Utils.vRef
import myJs.myPkg.{MiniColorsOptions, MyReact}
import myJs.myPkg.jquery.{$, _}
import org.scalajs.dom.{Event, html}

import scala.scalajs.js
import myJs.myPkg.Hooks._

/** Created by yz on 21/1/2022
  */
object PureMiniColorCp {

  case class Props(
      name: String = "",
      readOnly: Boolean = false,
      placeHolder: String = "",
      value: js.UndefOr[String] = js.undefined,
      onChange: String => SyncIO[Unit] = (v: String) => SyncIO {},
      `type`: String = "text",
      selfClassName: String = "",
      multiple: Boolean = false,
      formJq: JQuery = $("#form")
  ) {
    @inline def render: VdomElement = {
      Component(this)
    }
  }

  val Component = ScalaFnComponent[Props] { props =>
    val inputRef = MyReact.createRef[html.Input]
    val defaultV = useRef(props.value)

    useEffect(
      SyncIO {

        def colorChange = (value: js.UndefOr[String], opacity: js.UndefOr[js.Any]) => {
          props.onChange(value.get).unsafeRunSync()
          if (opacity.isDefined) {
            s"${value.get},${opacity.get}"
          } else {
            value.get
          }
          s"${value.get}"
        }

        val y = inputRef.current
        val swatches = List(
          "#00ff00",
          "#FFFFFF",
          "#a5d6a7",
          "#fff59d",
          "#ffcc80",
          "#bcaaa4",
          "#eeeeee",
          "#f44336",
          "#2196f3",
          "#4caf50",
          "#ffeb3b",
          "#ff9800",
          "#795548",
          "#9e9e9e"
        )
        val options = MiniColorsOptions(
          control = "hue",
          format = "hex",
          swatches = swatches,
          theme = "bootstrap",
          inline = false,
          letterCase = "lowercase",
          position = "bottom",
          keywords = "",
          change = colorChange,
          opacity = false,
          defaultValue = props.value.get
        )
        $(y).minicolors(options)
        ()
      },
      List()
    )

    useEffect(
      {
        SyncIO {} >> {
          val y = inputRef.current
          val curV = $(y).myVal
          if (curV.nonBlank) {
            SyncIO {
              $(y).minicolors("value", js.Dictionary("color" -> s"${curV}"))
              ()
            }
          } else {
            props.onChange(defaultV.current.get)
          }
        }
      },
      List(props.value)
    )

    val (myV, setMyV) = useState("")

    def valueChange(e: ReactEventFromInput) = {
      val v = e.target.value
      props.onChange(v)
    }

    val v = props.value.map { x => x }.getOrElse(myV)

    input(
      `type` := props.`type`,
      className := s"form-control fillByName ${props.selfClassName}",
      name := s"${props.name}",
      value := s"${v}",
      readOnly := props.readOnly,
      placeholder := props.placeHolder,
      vRef := inputRef,
      onChange ==> valueChange,
      multiple := props.multiple
    )

  }

}
